<template>
  <div class="home-author">
    <el-card class="box-card">
      <div slot="header" class="box-header">
        <span><i class="iconfont icon-guanyuwo"/>关于我</span>
      </div>
      <el-image class="author-image" :src="this.$store.state.authConfig.authorAvatar"></el-image>
      <h2 class="author-info" style="font-size: 1.5rem;">{{ this.$store.state.authConfig.author }}</h2>
      <h5 class="author-info" style="font-size: 0.8rem;">邮箱：{{ this.$store.state.authConfig.email }}</h5>
      <!-- 统计 -->
      <div class="author-count">
        <div class="author-count-item">
          分类：{{ this.$store.state.categoryNum }}
        </div>
        <div class="author-count-item">
          标签：{{ this.$store.state.tagNum }}
        </div>
        <div class="author-count-item">
          文章：{{ this.$store.state.articleNum }}
        </div>
      </div>
      <!-- 社交信息 -->
      <div class="author-social">
        <div>
          <a :href="this.$store.state.authConfig.csdn" target="_blank" style="color: red"><i
              class="iconfont icon-csdn"></i></a>
        </div>
        <div>
          <a :href="'http://wpa.qq.com/msgrd?v=3&site=qq&menu=yes&uin=' + this.$store.state.authConfig.qqNumber"
             target="_blank" style="color: #1AB6FF"><i class="iconfont icon-QQ"></i></a>
        </div>
        <div>
          <a :href="this.$store.state.authConfig.github" target="_blank"><i class="iconfont icon-github"></i></a>
        </div>
        <div>
          <a :href="this.$store.state.authConfig.gitee" target="_blank" style="color: red"><i
              class="iconfont icon-gitee"></i></a>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>

export default {
  name: "home-author",
  data() {
    return {}
  },
  created() {
    this.getWebSiteInfo()
  },
  methods: {
    getWebSiteInfo() {
      this.$store.dispatch('setWebInfo');
    }
  }
}
</script>

<style scoped>
.box-card {
  width: 100%;
  margin-bottom: 20px;
}

.box-header:hover {
  color: red;
  font-weight: bold;
}

.author-image {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  display: block;
  margin: 0 auto;
}

.author-info {
  font-weight: bold;
  text-align: center;
}

.author-count {
  margin-top: 8px;
  width: 320px;
  height: 40px;
  display: flex;
}

.author-count-item {
  width: 105px;
  text-align: center;
}

.author-social {
  margin-top: 8px;
  width: 320px;
  height: 40px;
  display: flex;
}

.author-social div {
  width: 80px;
  text-align: center;
}

.author-social a {
  text-decoration: none;
}

.author-social i {
  font-size: 30px;
}

.author-social i:hover {
  font-size: 35px;
}
</style>
